<template>
    <div ref="tableHeightRef" class="padding-xs">
        <n-data-table :data="tableData"
                      :max-height="tableHeight"
                      :remote="true"
                      :columns="columns"
                      :loading="loading"
                      :pagination="pagination"
                      :row-key="(row:any) => row[rowKey]">

        </n-data-table>
    </div>
</template>

<script setup lang="ts">
import {onMounted, onUnmounted, reactive, ref} from "vue";
import {debounce} from "@/utils";
//@ts-ignore
import elementResizeDetectorMaker from "element-resize-detector";

const erd = elementResizeDetectorMaker();
const props = defineProps({
    getData: {
        type: Function,
        required: true
    },
    orParams: {
        type: Object,
        default() {
            return {}
        },
    },
    andParams: {
        type: Object,
        default() {
            return {}
        }
    },
    orderParams: {
        type: Object,
        default() {
            return {}
        }
    },
    columns: {
        type: Array,
        required: true,
    },
    rowKey: {
        type: String,
        default: 'id',
    },
})
const loading = ref(false)
const tableData = ref()
const pagination = reactive(
    {
        pageNo: 1,
        pageSize: 15,
        showSizePicker: true,
        pageSizes: [5, 8, 15],
        itemCount: 0,
        onChange: (page: number) => {
            pagination.pageNo = page
            handleQuery()
        },
        onUpdatePageSize: (pageSize: number) => {
            pagination.pageNo = 1
            pagination.pageSize = pageSize
            handleQuery()
        }
    })


const tableHeight = ref(300)
const tableHeightRef = ref()


onMounted(() => {
    erd.listenTo(document.body, debounce(() => {
        tableHeight.value = tableHeightRef.value.offsetHeight - 120
    }, 1000));

    // tableHeight.value=tableHeightRef.value.offsetHeight-120
    // window.onresize=debounce(()=>{
    //   console.log(2)
    //   if(tableHeightRef.value.offsetHeight){
    //     tableHeight.value=tableHeightRef.value.offsetHeight-120
    //     console.log(tableHeight.value)
    //   }
    // },500)
})
onUnmounted(() => {
    erd.uninstall(document.body)
})


/**
 * 查询
 */
const handleQuery = () => {
    window.$loadingBar.start()
    loading.value = true
    props.getData({
        pageNo: pagination.pageNo,
        pageSize: pagination.pageSize,
        orParams: JSON.stringify(props.orParams),
        andParams: JSON.stringify(props.andParams),
        orderParams: JSON.stringify(props.orderParams)
    }).then((res: { data: { code: number; data: { records: any; total: number; }; }; }) => {
        if (res && res.data.code === 0) {
            tableData.value = res.data.data.records
            pagination.itemCount = res.data.data.total
            loading.value = false
            window.$loadingBar.finish()
        }

    })

}
/**
 * 搜索
 */
const handleSearch = () => {
    pagination.pageNo = 1
    handleQuery();

}
defineExpose({
    handleSearch
})
</script>

<style scoped>

</style>